<template>
    <body id="poster">
    <el-form :inline="true" :model="loginForm" :rules="rules" ref="loginForm" class="login-container">
        <h3 class="login_title">系统登录</h3>
        <el-form-item label="账号:" prop="userName" class="form_css">
            <el-input type="text" v-model="loginForm.userName"  placeholder="请输入账号" class="el_input_css"></el-input>
        </el-form-item>

        <el-form-item label="密码:" prop="passWord" class="form_css">
            <el-input type="password" v-model="loginForm.passWord" placeholder="请输入密码" class="el_input_css"></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="verCode" class="form_css">
            <el-input type="text" v-model="loginForm.verCode" style="width: 150px;  margin-right: 72px;"
                      placeholder="请输入您的验证码"/>
            <div class="login-code" @click="refreshCode">
                <!--验证码组件-->
                <checkVerification :identifyCode="identifyCode"></checkVerification>
            </div>
        </el-form-item>
        <el-form-item style="width: 275px;">
            <el-button type="primary" style="width: 250px;background: #505458;border: none;margin-left: 50px;"
                       v-on:click="doLogin('loginForm')">登录
            </el-button>
        </el-form-item>
    </el-form>
    </body>
</template>

<script>

    import {login} from '@/api/index'
    import checkVerification from './sidentify'

    export default {
        name: "Login",
        components: {checkVerification},
        data() {
            return {
                identifyCodes: "1234567890ABCDEFG",
                identifyCode: "",
                loginForm: {
                    userName: '',
                    passWord: '',
                    verCode: ''
                },
                rules: {             //表单校验规则
                    userName: [
                        {required: true, message: '请输入账号名称', trigger: 'blur'},
                    ],
                    passWord: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    verCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ]
                }

            }

        },
        methods: {
            doLogin(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.loginForm.verCode != this.identifyCode) {
                            this.$notify.warning("验证码不正确!");
                            this.loginForm.verCode = "";
                            this.refreshCode();
                            return false;
                        }
                        login(this.loginForm)
                            .then((successResponse) => {
                                console.log("返回结果是:" + JSON.stringify(successResponse.data));
                                if (successResponse.data.message == "OK") {
                                    this.$notify.success("登录成功!");
                                    //跳转路由
                                    this.$router.push({
                                        path: '/HelloWorld',
                                        query: {realName: successResponse.data.data.realName}
                                    })
                                } else {
                                    this.$notify.error("用户名或密码错误!");
                                }

                            }).catch(failResponse => {
                            console.log("方法异常:" + failResponse);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //验证码
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },

            refreshCode() {
                this.identifyCode = "";
                this.makeCode(this.identifyCodes, 4);
            },
            makeCode(o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[
                        this.randomNum(0, this.identifyCodes.length)
                        ];
                }
                console.log(this.identifyCode);
            },

        },
        created() {
            //初始化验证码
            this.refreshCode();
        },
        mounted() {
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
        }
    }
</script>

<style lang='less' scoped>
    #poster {
        background: url("../assets/images/Starry.png");
        background-position: center;
        height: 100%;
        width: 100%;
        background-size: cover;
        position: fixed;
    }

    body {
        margin: 0px;
        padding: 0;
    }

    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 90px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }

    form_css {
        width: 362px;
    }

    el_input_css {
        width: 240px;
    }

    .code {
        width: 124px;
        height: 31px;
        border: 1px solid rgba(186, 186, 186, 1);
    }

    .login-code {
        cursor: pointer;
        position: absolute;
        top: 6px;
        left: 160px;
    }

    button_css {
        width: 250px;
        background: #505458;
        border: none;
        margin-left: 50px;
    }

</style>